<template>
  <cs-container :is-back-to-top="true">
    <router-view />
    <div v-if="show">
      <div class="divTop">
        <el-row>
          <el-col :span="18">
            <!-- 删除按钮 -->
            <el-button
              type="primary"
              icon="el-icon-delete-solid"
              size="mini"
              :disabled="this.ids.length === 0"
              @click="delAllData">删除</el-button>
            <!-- 日期选择器 -->
            <el-date-picker
              v-model="value1"
              type="daterange"
              size="small"
              class="datePicker"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <el-select v-model="value" placeholder="请选择" size="small">
              <el-option
                v-for="item in option1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!-- 刷新 -->
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refreshList">刷新列表</el-button>
          </el-col>
          <el-col :span="6">
            <el-input
              placeholder="请输入内容"
              prefix-icon="el-icon-search"
              size="small"
              @keyup.enter.native="getAssetes"
              v-model="keyWord">
            </el-input>
          </el-col>
        </el-row>
      </div>
      <div class="divButtom">
        <!-- 表格区域 -->
        <cs-table
          :table-data="currentTableData"
          :table-label="tableLabel"
          @handleButton="handleButton"
          @handleSortChange="handleSortChange"
          @handleSelectionChange="handleSelectionChange"
          :table-option="tableOption"
          class="table">
          <template slot="tag" slot-scope="scope">
            <el-tag type="mini"
              v-for='(items, index) in scope.row.assetsTagEntities'
              :key='index'
              :color="items.color">{{items.name}}</el-tag>
          </template>
        </cs-table>
        <!-- 分页区域 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </cs-container>
</template>

<script>
import {
  getAssetsReserve,
  delAssetsItem,
  delAssetsItems
} from '@/api/assets/reserve.js'
import CsTable from '@/components/cs-table'
export default {
  name: 'index1',
  data() {
    return {
      // 分页参数
      pageNo: 1,
      pageSize: 10,
      total: 0,
      keyWord: '',
      currentTableData: [],
      tableLabel: [
        { label: '名称', param: 'name', align: 'center', sortable: true, isShow: true },
        { label: 'IP', param: 'ipAddr', align: 'center', isShow: true },
        { label: '类型', param: 'typeName', align: 'center', sortable: false, isShow: true },
        { label: '来源', param: 'assetsGroupName', align: 'center', sortable: false, isShow: true },
        { label: '发现时间', param: 'tag', align: 'center', sortable: false, slot: true, isShow: true }
      ],
      tableOption: {
        label: '操作',
        width: '200',
        options: [
          { label: '添加', type: 'primary', icon: 'el-icon-circle-plus', methods: 'audit', auth: 'sys:group:update' },
          { label: '删除', type: 'danger', icon: 'el-icon-delete', methods: 'delete', auth: 'sys:group:delete' }
        ]
      },
      disabled: false,
      ids: [],
      show: true,
      value1: '',
      value: '',
      option1: [
        { value: '0', label: '全部' },
        { value: '1', label: '事件' }
      ]
    }
  },
  components: {
    CsTable
  },
  created() {
    this.getAssetes()
  },
  watch: { // 监听路由变化
    $route(to, from) {
      const ThisPage = to.path
      if (ThisPage === '/module/assets/reserve') {
        this.show = true
        this.getAssetes()
      } else {
        this.show = false
      }
    }
  },
  methods: {
    // 查询全部数据
    getAssetes() {
      const data = {
        keyWord: this.keyWord,
        pageNo: this.pageNo,
        pageSize: this.pageSize
      }
      getAssetsReserve(data).then((res) => {
        this.currentTableData = res.data.rows
        this.total = res.data.totalRows
      })
      this.keyWord = ''
    },
    // 判断操作栏按钮
    handleButton(methods, row, index) {
      // 修改
      if (methods.methods === 'audit') {
        this.handleAdd(methods.row)
      } else if (methods.methods === 'delete') { // 删除
        this.handleDelete(methods.index)
      }
    },
    // 多选操作
    handleSelectionChange(val) {
      this.ids = val.map(item => {
        return item.id
      })
    },
    // 批量删除数据
    delAllData() {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        delAssetsItems(this.ids).then((res) => {
          this.getAssetes()
        })
      })
        .catch(() => {
        })
    },
    // 根据id单个删除
    handleDelete(index) {
      this.$confirm('确定要执行该操作吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnClickModal: false
      })
        .then(() => {
          delAssetsItem(this.currentTableData[index].id)
            .then((res) => {
              this.getAssetes()
            })
        })
        .catch(() => {
        })
    },
    // 路由跳转
    route(row) {
      const routeList = this.$router.options.routes
      const currentRouter = this.$route.path
      const pRouter = currentRouter.slice(0, currentRouter.lastIndexOf('/'))
      const childRouter = currentRouter.slice(currentRouter.lastIndexOf('/') + 1)
      routeList.forEach(element => {
        if (pRouter === element.path) {
          if (element.children) {
            element.children.forEach(el => {
              if (el.path === childRouter) {
                el.children = []
                let router = {
                  path: 'updategroup',
                  name: 'updategroup'
                }
                router.component = resolve => require(['@/views/module/assets/reserve/components/update/updategroup'], resolve)
                el.children.push(router)
              }
            })
          }
        }
      })
      this.$router.addRoutes(routeList)
      /* eslint-disable */
      this.$router.replace({ name: 'updategroup', path: '/module/assets/reserve/components/update/updategroup', params: { row: row }})
    },
    // 编辑信息
    handleAdd(row) {
      this.route(row)
    },
    // 刷新列表
    refreshList() {
      this.getAssetes()
    },
    handleSortChange() {
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getAssetes()
    },
    handleCurrentChange(newPage) {
      this.pageNo = newPage
      this.getAssetes()
    }
  }
}
</script>

<style scoped>
.divTop {
  padding: 20px 20px 10px 20px;
}
.divButtom {
  padding: 0 20px;
}
.el-select {
  width: 130px;
}
.el-button, .datePicker, .el-select {
  margin-right: 10px;
}
.table {
  margin-bottom: 10px !important;
}
</style>
